<template>
  <ElTable :data="props.tableData">
    <ElTableColumn
      v-for="(key, index) in tableDataObjKeys"
      :key="index"
      :prop="key"
      :label="key"
      :width="180"
    >
      <template #default="scope">
        <template v-if="key == '有效期' || key == '给药日期'">
          <ElDatePicker
            v-model="scope.row[key]"
            type="datetime"
            placeholder="选择日期和时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
          />
        </template>
        <template v-else>
          <ElInput v-model="scope.row[key]" clearable></ElInput>
        </template>
        <!-- <span class="editable-cell" @click="handleClick(key, scope.row, scope.$index)">
          {{ scope.row[key] }}
        </span> -->
      </template>
    </ElTableColumn>
  </ElTable>
  <!-- 添加编辑对话框 -->
  <!-- <ElDialog
    v-model="dialogVisible"
    :title="`编辑 第${rowIndex}行 ${editingKey}`"
    top="30vh"
    width="95%"
    @close="handleDialogClose"
  >
    <ElInput v-model="tempValue" clearable />
    <template #footer>
      <ElButton @click="dialogVisible = false">取消</ElButton>
      <ElButton type="primary" @click="handleConfirm">确认</ElButton>
    </template>
  </ElDialog> -->
</template>

<script setup lang="ts">
import { computed } from 'vue'

type IProps = { tableData: Array<object> }
// type IRow = Record<string, string>
const props = defineProps<IProps>()

// const editingKey = ref<string | null>(null)
// const dialogVisible = ref(false)
// const tempValue = ref('')
// const rowIndex = ref(0)
// const currentRow: IRow = {}

// const handleClick = (key: string, row: IRow, index: number) => {
//   editingKey.value = key
//   currentRow = row
//   tempValue.value = row[key]
//   rowIndex.value = index + 1
//   dialogVisible.value = true
// }

// const handleConfirm = () => {
//   if (currentRow && editingKey.value) {
//     currentRow[editingKey.value] = tempValue.value
//   }
//   dialogVisible.value = false
// }

// const handleDialogClose = () => {
//   // 防止在对话框关闭时，表格数据更新过快导致的标题闪烁问题
//   setTimeout(() => {
//     editingKey.value = null
//     currentRow = {}
//     tempValue.value = ''
//     rowIndex.value = 0
//   }, 200)
//   dialogVisible.value = false
// }

// 保持原有的 tableDataObjKeys 计算属性
const tableDataObjKeys = computed(() => {
  if (props.tableData.length > 0) {
    return Object.keys(props.tableData[0])
  }
  return []
})
</script>

<style scoped>
.editable-cell {
  display: block;
  width: 100%;
  min-height: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.editable-cell:hover {
  background-color: #f5f7fa;
}
</style>
